<script setup lang='ts'>
import {ref} from 'vue'
import myhead from '../views/layout/head.vue'
import mymenu from '../views/layout/menu.vue'

//选项卡相关
import { storeToRefs } from 'pinia'
import store from '../store'
const { tabslist, tabsvalue } = storeToRefs(store())
const { removeTab, changeTab } = store()

//收缩和展开左侧菜单
const isCollapse = ref(false)
function changeCollapse(v: boolean) {
  isCollapse.value = v
}

</script>

<template>
  <div>
    <el-container>
      <el-header :class="isCollapse ? 'collapse' : ''">
        <!-- 头部 LOGO 导航 -->
        <div class="logo">
          <img :class="isCollapse ? 'rotate' : 'norotate'" src="../assets/aa.jpg"
            @click="changeCollapse(!isCollapse)" alt="" style="width: 30px; height: 30px" />
          <div class="logotext">
            <span><span class="tgreen">猫粮</span> 购 物 中 心</span><br />
            <span>milk tea<span class="tyellow"> manage</span></span>
          </div>
        </div>
        <!-- 顶部导航栏 -->
        <myhead></myhead>
      </el-header>
      <el-container>
        <!-- 左边菜单导航 -->
        <el-aside width="null" :class="isCollapse ? 'shrink' : ''">
          <!-- 左侧菜单导航 -->
          <mymenu :isCollapse="isCollapse"></mymenu>
        </el-aside>
        <el-container>
          <!-- 右边子页面 -->
          <el-main :class="isCollapse ? 'collapse' : ''">

            <!-- 选项卡 -->
            <el-tabs type="card" v-model="tabsvalue" @tab-remove="removeTab" @tab-change="changeTab">

              <el-tab-pane v-for="item in tabslist" :key="item.name" :label="item.label" :name="item.name"
                :closable="item.closable" :disabled="item.disabled">
                <template #label>
                  <span class="custom-tabs-label">
                    <el-icon>
                      <component :is="item.icon" v-if="item.icon" />
                    </el-icon>
                    <span> {{ item.label }} </span>
                  </span>
                </template>
              </el-tab-pane>

              <router-view></router-view>
              
            </el-tabs>
          </el-main>
          <!-- <el-footer>Footer</el-footer> -->
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.logo {
  width: 170px;
  float: left;
  height: 50px;
  background-color: rgb(84, 92, 100);
  color: aliceblue;
  padding: 5px 20px 5px 10px;
  transition: width 0.3s;
}

.logo img {
  float: left;
}

.el-header {
  padding: 0px !important;
  margin: 0px 20px;
  background-color: rgb(84, 92, 100);
}

.el-header.collapse .logo {
  width: 54px;
  padding-right: 0px;
  transition: width 0.3s;
}

.rotate {
  transform: rotate(0deg);
  transition: transform 0.3s;

  -ms-transform: rotate(0deg);
  /* IE 9 */
  -moz-transform: rotate(0deg);
  /* Firefox */
  -webkit-transform: rotate(0deg);
  /* Safari 和 Chrome */
  -o-transform: rotate(0deg);
  /* Opera */

  transition: -ms-transform 0.3s;
  transition: -moz-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: -o-transform 0.3s;
}

.norotate {
  transform: rotate(22deg);
  transition: transform 0.3s;

  -ms-transform: rotate(22deg);
  /* IE 9 */
  -moz-transform: rotate(22deg);
  /* Firefox */
  -webkit-transform: rotate(22deg);
  /* Safari 和 Chrome */
  -o-transform: rotate(22deg);
  /* Opera */

  transition: -ms-transform 0.3s;
  transition: -moz-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: -o-transform 0.3s;
}

.logotext {
  display: block;
  transition: display 0.3s;
  float: left;
  font-size: 14px;
  margin-top: 8px;
}

.collapse .logotext {
  width: 0px;
  transition: width 0.3s;
  display: none;
  transition: display 0.3s;
}

.tyellow {
  color: rgb(245, 171, 0);
}

.tgreen {
  color: rgb(0, 164, 94);
}

.tblue {
  color: rgb(0, 172, 168);
}

/*自定义布局样式 */
.el-aside {
  width: 200px !important;
  /* width: 200px; */
  position: fixed;
  left: 28px;
  top: 68px;
  bottom: 0;
  z-index: 666;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  background-color: rgb(84, 92, 100) !important;
  transition: all 0.3s;
}

.el-aside.shrink {
  width: 64px !important;
  transition: width 0.3s;
  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1)
}

.el-main {
  position: fixed;
  left: 200px;
  right: 0;
  top: 68px;
  bottom: 0;
  z-index: 998;
  width: auto;
  overflow-y: auto;
  /* background-color: red; */
  margin-right: 28px;
  margin-left: 30px;
  transition: all 0.3s;
}

.collapse {
  transition: left 0.3s;
  left: 65px;
}

.el-icon {
  margin-right: 5px;
}
</style>